
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>投票系统</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <meta name="format-detection" content="telephone=NO">
        <meta name="apple-touch-fullscreen" content="YES"/>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
        <meta name="HandheldFriendly" content="True">
        <link rel="stylesheet" type="text/css" href="css/css.css"/>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <script src="js/vue.global.js"></script>
        <script src="js/axios.min.js"></script>
        <script>
            (function (win, doc) {
                function change() {
                    doc.documentElement.style.fontSize = 20 / 320 * doc.documentElement.clientWidth + 'px';
                }
                change();
                win.addEventListener('resize', change, false);
            })(window, document);
        </script>
    </head>
    <body>
        <div id="app">
            <div class="logo">
                <div class="logo_but hd" v-on:click="showActive()">活动规则</div>
                <div class="logo_but ph" v-on:click="rankingList()">排行榜</div>
            </div>
            <div class="center" id="main">
                <ul class="Exhibition">
                    <li v-for="(item, index) in players" :key="index" class="Exhibition_block">
                        <div class="E_center">
                            <div class="E_top" v-on:click="playerInfo(item.id)"><img :src="item.avatar"></div>
                            <div class="E_bot">
                                <p>{{ item.ref }}号：{{ item.nickname }}</p>
                                <p><span>{{ item.score }}</span>票</p>
                                <P class="sub ba_color" v-on:click="vote(item.id)">为TA投票</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 遮罩层 -->
            <div id='mask'></div>
            <!-- 透明遮罩层 -->
            <div id='masks'></div>
            <!-- 详情弹出层 -->
            <div class="xiangqing" v-show="xqShow">
                <div class="table">
                    <div class="table_scroll">
                        <div class="zuopin_title">{{ player.ref }}号</div>
                        <div class="wrap_head">
                            <div class="wrap_pic">
                                <img :src="player.avatar" />
                            </div>
                            <div class="wrap_right">
                                <span class="wrap_name">昵称：<span>{{ player.nickname }}</span></span>
                                <span class="wrap_name wrap_name1">
                                    <label>参赛宣言：</label>
                                    <span>{{ player.declaration }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="wrap_toupiao">
                            <div class="sub_one" v-on:click="closePlayerInfo()">关闭</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行 -->
            <div class="paihang" v-show="rankingShow">
                <div class="table">
                    <div class="wrap_paiming">
                        <img src="images/pic_ranking.png" />
                    </div>
                    <ul class="table-tab">
                        <li class="table-wrap table_title">
                            <div class="table-left">排名</div>
                            <div class="table-right">姓名</div>
                            <div class="table-right">票数</div>
                        </li>
                        <li class="table-wrap" v-for="(item, index) in ranking" :key="index">
                            <div class="">{{ index + 1 }}</div>
                            <div class="">{{ item.nickname }}</div>
                            <div class="">{{ item.score }}</div>
                        </li>
                    </ul>
                    <div class="wrap_toupiao">
                        <div class="sub_one" v-on:click="closeRanking()">关闭</div>
                    </div>
                </div>
            </div>
            <!-- 活动规则 -->
            <div class="actives" v-show="activeShow">
                <div class="center">
                    <div class="Title">
                        <p>活动规则</p>
                    </div>
                    <div class="active"></div>
                    <div class="text-active">1.选手可分享好友进行投票，每人每天每次可投1票；</div>
                    <div class="text-active">2.文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
                    <div class="text-active">3.文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
                    <div class="wrap_toupiao">
                        <div class="sub_one" v-on:click="closeActive()">关闭</div>
                    </div>
                </div>
            </div>
        </div>    
    </body>
    <script>
        const { createApp } = Vue
  
        createApp({
            data() {
                return {
                    aid: 1,             //活动ID
                    players: [],        //选手数据
                    ranking: [],        //排行榜数据
                    xqShow: false,      //选手详情弹出框
                    player: {},         //选手详情
                    activeShow: false,  //规则弹出框
                    rankingShow: false  //排行榜弹出框
                }
            },
            methods: {
                getPlayers() {
                    //获取参赛选手
                    axios({
                        method: 'post',
                        headers: { 'content-type': 'application/x-www-form-urlencoded' },
                        url: '/api/player/list',
                        data: {
                            aid: this.aid,
                        }
                    }).then((res) => {
                        if(res.data.code == 0){
                            this.players = res.data.data
                        }
                    })
                },
                vote(id) {
                    //投票
                    var uid = localStorage.getItem('uid')
                    if(uid == "") {
                        alert("请先登录")
                        return false;
                    }
                    if(id == "") {
                        alert("请选择要操作的选手")
                        return false;
                    }
                    axios({
                        method: 'post',
                        headers: { 'content-type': 'application/x-www-form-urlencoded' },
                        url: '/api/vote/add',
                        data: {
                            userId: uid,
                            playerId: id,
                        }
                    }).then((res) => {
                        if(res.data.code == 0){
                            this.getPlayers()
                            alert("投票成功")
                        } else {
                            alert("投票失败，" + res.data.msg)
                            return false;
                        }
                    })
                },
                playerInfo(id) {
                    //获取选手详情
                    this.xqShow = true
                    that = this
                    this.players.forEach(function(e) {
                        if(e.id == id){
                            that.player = e
                        }
                    })
                },
                rankingList(){
                    //获取排行榜
                    axios({
                        method: 'post',
                        headers: { 'content-type': 'application/x-www-form-urlencoded' },
                        url: '/api/ranking',
                        data: {
                            aid: this.aid,
                        }
                    }).then((res) => {
                        if(res.data.code == 0){
                            this.ranking = res.data.data
                            this.rankingShow = true
                        }
                    })
                },
                closePlayerInfo() {
                    //关闭详情
                    this.xqShow = false
                    this.player = {}
                },
                showActive() {
                    //打开规则
                    this.activeShow = true
                },
                closeActive() {
                    //关闭规则
                    this.activeShow = false
                },
                closeRanking() {
                    //关闭排行榜
                    this.rankingShow = false
                }
            },
            mounted() {
                //默认加载选手列表
                this.getPlayers()
            }
        }).mount('#app')
    </script>

</html>